<template>
	<div class="container">
		<!-- 搜索栏 -->
		<el-form :model="listParams" label-width="80px" :inline="true" size="default">
			<el-form-item>
				<el-input placeholder="请输入用户名称" v-model="listParams.username"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button :icon="Search" @click="searchBtn">搜索</el-button>
				<el-button style="color: #FF7670;" :icon="Close" @click="resetBtn">重置</el-button>
				<el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
			</el-form-item>
		</el-form>
	</div>
	<el-table :data="tableData.list" style="width: 100%">
		<el-table-column prop="accountId" label="编号" width="120" align="center" />
		<el-table-column prop="username" label="用户名" width="120" align="center" />
		<el-table-column prop="nickName" label="昵称" width="180" align="center" />
		<el-table-column prop="avatar" label="头像" width="120" align="center">
			<template #default="scope">
				<img :src="scope.row.avatar" alt="" width="60">
			</template>
		</el-table-column>
		<el-table-column prop="tel" label="电话号码" align="center" width="180" />
		<el-table-column prop="status" label="状态" align="center" width="80">
			<template #default="scope">
				<el-switch v-model="scope.row.status" class="ml-2" inline-prompt
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="启用" inactive-text="禁用"
					active-value="1" inactive-value="0" @change="changeStaus(scope.$index, scope.row)" />
			</template>
		</el-table-column>
		<el-table-column prop="createBy" label="创建者" align="center" width="100" />
		<el-table-column prop="loginDate" label="登录日期" align="center" />
		<el-table-column align="center" label="操作" width="350">
			<template #default="scope">
				<el-button  :icon="Edit" type="primary" @click="editBtn(scope.$index, scope.row)">编辑</el-button>
				<el-button  :icon="Edit" type="primary" @click="assignRole(scope.$index, scope.row)">分配角色</el-button>
				<el-button  :icon="Delete" type="danger" @click="deleteBtn(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="pagination">
		<el-pagination v-model:current-page="listParams.current" v-model:page-size="listParams.size"
			:page-sizes="[10, 50, 100, 200]" :small="small" :disabled="disabled" :background="background"
			layout="total, sizes, prev, pager, next, jumper" :total="listParams.total" @size-change="sizeChange"
			@current-change="currentChange" />
	</div>
	<!--  新增和编辑用户弹窗-->
	<UserAddAndEdit ref="userAddAndEditRef" @save="save"></UserAddAndEdit>
	<!-- 分配角色弹窗 -->
	<AssignRole ref="assignRoleRef" @save="save"></AssignRole>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Search, Plus, Close, Edit, Delete, Setting } from '@element-plus/icons-vue';
import { useUserTable } from '@/composables/user/useUserTable'
import { useUser } from '@/composables/user/useUser'
import UserAddAndEdit from '@/components/user/UserAddAndEdit.vue';
import AssignRole from '@/components/user/AssignRole.vue';
const { listParams, searchBtn, resetBtn, tableData, getUserList, sizeChange, currentChange } = useUserTable()
const { addBtn, deleteBtn, editBtn, assignRole, save, userAddAndEditRef, changeStaus, assignRoleRef } = useUser(getUserList)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const on = ref(true)
onMounted(() => {
	getUserList()
})
</script>

<style scoped lang="scss">
.container {
	overflow: hidden;
	height: 60px;
	line-height: 60px;
	padding: 20px 20px 0 20px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.pagination {
	padding: 20px;
	text-align: right;
	background-color: #fff;
	border-radius: 0 0 4px 4px;
}
</style>